"use client";
import { ControlOutlined, GlobalOutlined, MessageOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons'
import Image from 'next/image'
import Global from './Global';
import { useState } from 'react';
import Chat from './Chat';
import LoginDemo from './LoginDemo';
import AfterPractice from './AfterPractice';

interface Button {
  id: number;
  icon: React.ReactNode; 
  component: React.ReactNode;
}

export default function Home() {
  const buttons:Array<Button> = [
    {
      id: 0,
      icon: <GlobalOutlined />,
      component: <Global />
    },
    {
      id:1,
      icon: <MessageOutlined />,
      component: <Chat />
    },
    {
      id:2,
      icon: <VideoCameraOutlined />,
      component: <div>Video</div>
    },
    {
      id:3,
      icon: <UserOutlined />,
      component: <LoginDemo />
    },{
      id:4,
      icon: <UserOutlined />,
      component: <AfterPractice />
    }
  ]

  const [focusedButton, setFocusedButton] = useState<Button>();
  const [component, setComponent] = useState<React.ReactNode>(<Global />);
  const onButtonClick = (button: Button) => {
    setFocusedButton(button);
    setComponent(button.component);
  }
  return (
    <main className="flex w-full h-screen ">
      <div className="w-12 flex flex-col ">
        <div className="">
          <div className="flex flex-col items-center space-y-2 py-4  ">
            <div className="w-7 h-7">
              <div className="absolute w-5 h-5 border-green-500 border-2 rounded-full "> </div>
              <div className="absolute w-5 h-5 border-green-500 border-2 rounded-full translate-x-2"> </div>
            </div>
            <Image
              className="rounded-full"
              src="/aaa.png"
              alt="Next.js Logo"
              width={36}
              height={36}
              priority
            />
          </div>
          <div className="border-b p-2 m-2"></div>
          <div className="flex flex-col items-center py-4 space-y-4 text-xl text-green-500 transition duration-300">
            {buttons.map((button) => {
              return (
                <div className={`flex items-center justify-center w-10 h-10 rounded-lg cursor-pointer transition duration-300  
                    ${focusedButton?.id===button.id ? "bg-green-500 text-white" : "text-green-500 bg-white"}`}
                  onClick={() => onButtonClick(button)}
                >
                  {button.icon}
                </div>
              );
            })}
          </div>
        </div>
        <div className="flex-1 flex flex-col items-center py-4 space-y-4 text-xl justify-end text-gray-500 transition duration-300"
          onClick={() => setComponent(<div>Settings</div>)}
        >
          <ControlOutlined className="hover:bg-gray-700 hover:text-white p-2 rounded-lg cursor-pointer transition duration-300" />
        </div>
      </div>
      <div className="flex-1 bg-white">{component}</div>
    </main>
  )
}
